<template>
  <div class="app-container">
    <el-card title="绑定手机号">
      <ele-form
        v-model="formData"
        v-bind="formConfig"
        :request-fn="handleRequest"
        :is-show-back-btn="false"
        :is-show-cancel-btn="true"
        submit-btn-text="绑定手机号"
        @cancel="cancelMobile"
        @request-success="handleRequestSuccess"
      />
    </el-card>
  </div>
</template>

<script>
import {
  getcode,
  setpassword
} from '@/projects/shop/api/profile/profile.js'
import { userbindMobile } from '@/projects/shop/api/user'
export default {
  name: 'BindMobile',
  props: {
    userinfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      is_send_code: 0,
      formData: {
        code: '',
        mobile: ''
      },
      formConfig: {
        formSpan: 24,
        labelPosition: 'top',
        formDesc: {
          mobile: {
            type: 'input',
            label: '手机号'
          },
          code: {
            type: 'input',
            label: '验证码',
            slots: {
              'append': (h) => {
                return h('span', { class: 'text-pointer', on: {
                  click: () => {
                    this.getcode()
                  }
                }}, '发送验证码')
              }
            }
          },
          newpassword: {
            type: 'input',
            label: '密码'
          },
          company: {
            type: 'input',
            label: '公司名称'
          }
        },
        order: ['company', 'mobile', 'code', 'newpassword']
      }
    }
  },
  created() {
    this.formData.mobile = this.userinfo.mobile
    this.formData.company = this.userinfo.company
  },
  methods: {
    cancelMobile() {
      this.$emit('cancelMobile')
    },
    // 获取验证码
    getcode() {
      const that = this
      if (!that.formData.mobile) {
        that.$message({
          message: '请输入手机号码',
          type: 'warning'
        })
        return false
      }
      const data = {
        mobile: that.formData.mobile,
        type: 'bindMobile'
      }
      getcode(data).then((res) => {
        that.$message({
          message: res.message,
          type: 'success'
        })
      })
    },
    handleRequest(data) {
      const that = this
      console.log(that.userinfo)
      userbindMobile(data).then((res) => {
        that.$message({
          message: res.message,
          type: 'success'
        })
        this.cancelMobile()
      })
    },
    handleRequestSuccess() {}
  }
}
</script>
